<template>
        <div class="common-layout">
    <el-container>
      <el-aside width="200px"> 
        <div class="logo " ><img src="../assets/imgs/logo.png" alt="" class="imgs"><span class="title">赤兔养车</span></div>

      <el-menu  active-text-color="#ffd04b"
        background-color="#545c64"
        class="el-menu-vertical-demo"
        default-active="2"
        router
        text-color="#fff">
            <template v-for="item in Menus" :key="item.path">
              <el-menu-item v-if="!item.children" :index="'/nav'+item.path">
            <el-icon>
                <i :class="'iconfont icon-'+item.icon"></i>
            </el-icon>
            <span>{{ item.name }}</span>
    </el-menu-item> 
    <el-sub-menu v-else :index="'/nav'+item.path">
            <template #title>
                <i :class="'iconfont icon-'+item.icon" id="icons"></i>
                    <span>{{ item.name }}</span>
            </template>
            <el-menu-item  v-for="m in item.children" :index="'/nav'+m.path" :key="m.path">{{ m.name}} </el-menu-item>
           
    </el-sub-menu>
            </template>
  

            </el-menu>
    </el-aside>
      <el-container>
        <el-header>
          
        <el-menu
    :default-active="activeIndex"
    class="el-menu-demo"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
  >
    <el-menu-item index="0"> <el-icon id="bkone"><Fold /></el-icon></el-menu-item>
    <div class="flex-grow" />
    
    <el-sub-menu index="/nav">
      <template #title><img :src="`http://xawn.f3322.net:8002/distremote/static/avatar/${avatar}`"  alt=""><span>{{ username }}</span></template>
      <el-menu-item index="/nav/profile"><el-icon><User /></el-icon>个人中心</el-menu-item>
      <el-menu-item index="1-2"><el-icon><ZoomOut /></el-icon>密码修改</el-menu-item>
      <el-menu-item index="1-3"><el-icon><Setting /></el-icon>系统定制</el-menu-item>
      <el-menu-item index="/login"><el-icon><SwitchButton /></el-icon>退出登录</el-menu-item>
     
    </el-sub-menu>
   
  </el-menu>
        </el-header>
        
        <el-main> <router-view></router-view></el-main>
      </el-container>
    </el-container>
  </div>
</template>
    
<script setup >

import { Document ,Menu as IconMenu,Location,Edit,
  Fold,
  Setting,
  SwitchButton,
  User,
  ZoomOut
} from '@element-plus/icons-vue'
import { onBeforeMount,ref,reactive, } from 'vue'
import {useRouter} from 'vue-router';
import { menuApi } from '../apis/user';
//头像
  


const avatar=ref()
avatar.value=JSON.parse(localStorage.user).avatar
const Menus=ref([])
// const m=reactive({})
onBeforeMount(()=>{
    //拿到菜单数据
    getMeau()
})
//头部个人中心选择
const route=useRouter()
const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key)
  route.push(key)



}
//用户菜单数据
const {username}=JSON.parse(localStorage.user)
console.log("username",username);

 async function getMeau(){
    const data=await menuApi(username)
    console.log("菜单数据",data[0].children
)
    Menus.value=data[0].children

 

    console.log("mesa",Menus);
    

 }



</script>
    
<style lang="scss" scoped>
    .common-layout{
        width: 100%;
        height: 100vh;
        // background-color: aqua;
        .el-container{
            .el-aside{
                background-color: #545C64;
                height: 100vh;
                .el-menu{
                    width: 200px;
                }
            } 
            .el-header{
               
                #bkone{
                  color: #545C64;
                  font-size: 50px;
                    margin-top: 10px;
                }
                img{
                        width: 40px;
                        height: 40px;
                        border-radius: 40px;
                        background-color: rgb(212, 131, 24);
                        vertical-align: middle;
                    }
                span{
                        margin-left: 10px;
                    }
            }
        }
    }

    .logo{
        background-color: #545C64;
        display: flex;
        align-items: center;
        height: 40px;
       .imgs{
        margin-left: 35px;
       }
        
        .title{
            font-size: 20px;
            color: #fff;
            font-weight: bold;
        }
    }
    #icons{
        margin-right: 5px;
    }
    .flex-grow {
  flex-grow: 1;
}

</style>